<template>
  <div class="box">
    <div class="back"></div>
    <div class="bb">
      <p>首页</p>
      <div class="top">
        <CarOne :num="num">
          <el-icon class="icon">
            <InfoFilled />
          </el-icon>
        </CarOne>
        <CarOne title="附近用户总数" text="自上个月以来" num="2,354">
          <el-icon class="icon1">
            <WarningFilled />
          </el-icon>
        </CarOne>
        <CarOne title="今日支出币" text="自上个月以来" num="924">
          <el-icon class="icon2">
            <RemoveFilled />
          </el-icon>
        </CarOne>
        <CarOne title="门店排名" text="自上个月以来" num="49.65%">
          <el-icon class="icon3">
            <SuccessFilled />
          </el-icon>
        </CarOne>
      </div>
      <div class="center">
        <CarThree title="门店成员"></CarThree>
        <CarFour @goHuiShouDingDanGuanLi="goHuiShou">
        </CarFour>
        <CarTwo title="订单跟踪" @goHuiShouDingDanGuanLi="goHuiShou"></CarTwo>
      </div>
      <div class="content">
        <div id="main" ref="divContainer"></div>
        <div id="main2" ref="divContainer2"></div>
      </div>
      <div class="bottom">
        <p>设备监控</p>
        <Tab @goDingDan="goJianKong"></Tab>
      </div>
      <div class="dibu">
        Copyright◎2019<span>OMINI.BASS</span>AII rights reserved
      </div>
    </div>

    <div class="master" v-show="master" @click="close">
      <div>
        <p>
          <el-icon size="20" class="ic">
            <WarningFilled />
          </el-icon><span>新订单！</span>有一条来自附近的回收订单，点击进行处理！
        </p>
        <el-icon size="20" class="ic" @click="close">
          <DeleteFilled />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import CarOne from "../../components/Home/CardOne.vue";
import CarTwo from "../../components/Home/CardTwo.vue";
import CarThree from "../../components/Home/CardThree.vue";
import CarFour from "../../components/Home/CardFour.vue";
import Tab from "../../components/Home/Tab.vue";
import * as echarts from "echarts";
import { ElNotification } from "element-plus";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getreorders, showPCOrderAll } from '../../api/index'

const router = useRouter();
const route = useRoute();
const num = ref(0)
const goJianKong = () => {
  router.push("/equipment/monitoring");
};
const goHuiShou = () => {
  router.push("/recycleOrder/admin");
}

showPCOrderAll()
  .then((res) => {
    num.value = res.data.data.totalCount
  })
  .catch((err) => {
    console.log(err)
  })


// // 遮罩层
const master = ref(true);
const close = () => {
  master.value = false;

};

// 获取 dom节点
const divContainer = ref(null);
const divContainer2 = ref(null);

// 在完成内容挂载后执行
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例

  var myChart = echarts.init(divContainer.value, "dark");
  var myChart2 = echarts.init(divContainer2.value);

  // 折线图
  myChart.setOption({
    title: {
      subtext: "表现",
      text: "近期兑换量",
      left: "left",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "cross" },
    },
    xAxis: {
      length: 3,
      type: "category",
      data: [
        "7月第一周",
        "7月第二周",
        "7月第三周",
        "7月第四周",
        "8月第一周",
        "8月第二周",
        "8月第三周",
        "8月第四周",
        "9月第一周",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [52, 59, 56, 46, 52, 45, 46, 56],
        type: "line",
      },
    ],
  });
  // 饼图
  myChart2.setOption({
    title: {
      subtext: "表现",
      text: "钱包收支情况",
      left: "left",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      bottom: 10,
      left: "center",
      data: ["已结算", "未结算"],
    },
    series: [
      {
        type: "pie",
        radius: "65%",
        center: ["55%", "50%"],
        selectedMode: "single",
        data: [
          { value: 735, name: "已结算" },
          { value: 510, name: "未结算" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
});

const tableArr = [
  "设备名称",
  "设备编号",
  "本月回收次数",
  "本月已支出币",
  "状态",
  "剩余空间",
  "操作",
];
const arr = [
  {
    设备名称: "矿大松原自动回收机1",
    设备编号: "95865265001",
    本月回收次数: "25",
    本月已支出币: "265",
    状态: "设备故障",
    剩余空间: "30%",
    btn1: true,
  },
  {
    设备名称: "矿大松原自动回收机1",
    设备编号: "95865265001",
    本月回收次数: "25",
    本月已支出币: "265",
    状态: "设备故障",
    剩余空间: "30%",
    btn1: true,
  },
  {
    设备名称: "矿大松原自动回收机1",
    设备编号: "95865265001",
    本月回收次数: "25",
    本月已支出币: "265",
    状态: "设备故障",
    剩余空间: "30%",
    btn1: true,
  },
  {
    设备名称: "矿大松原自动回收机1",
    设备编号: "95865265001",
    本月回收次数: "25",
    本月已支出币: "265",
    状态: "设备故障",
    剩余空间: "30%",
    btn1: true,
  },
];
const operationObj = {
  operation1: "查看详情",
  type1: "primary",
  text1: false, // true 为文字类型
  l1: true, //操作是否显示
  row: false, //是否合并
};

</script>
<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-content: center;
  // background: #f7f8fd;
  // height: 70vh;

  .back {
    height: 325px;
    background: #5e72e4;
  }

  .bb {
    position: absolute;
    top: 0px;
    left: calc(50% - 500px);
    display: flex;
    flex-direction: column;
    width: 1090px;

    margin-left: 50px;
    background: transparent;
    // background: #f7f8fd;

    margin-left: -20px;

    .top {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 10px;

      .icon {
        font-size: 40px;
        color: red;
      }

      .icon1 {
        font-size: 40px;
        color: orange;
      }

      .icon2 {
        font-size: 40px;
        color: green;
      }

      .icon3 {
        font-size: 40px;
        color: blue;
      }

      .one {
        margin-right: 10px;
      }
    }

    .center {
      display: flex;
      justify-content: space-around;
      height: 450px;
      margin: 0px 10px;
      margin-bottom: 20px;
    }

    .content {
      display: flex;
      margin: 0px 20px;
      justify-content: space-between;

      #main {
        width: 600px;
        height: 400px;
        border-radius: 8px;
        box-shadow: 5px 5px 5px #ccc;
        background-color: red;
      }

      #main2 {
        width: 400px;
        height: 400px;
        border-radius: 8px;
        box-shadow: 5px 5px 5px #ccc;
        background-color: white;
      }
    }

    .bottom {
      // background: pink;
      margin: 0px 20px;
      margin-top: 50px;

      border-radius: 8px;
      margin-bottom: 100px;
      box-shadow: 5px 5px 5px #ccc;

      p {
        color: black;
        font-size: 16px;
        font-weight: normal;
      }
    }
  }
}

.bb p:nth-child(1) {
  font-size: 18px;
  color: white;
  padding: 10px;
  font-weight: bolder;
  padding-left: 20px;
}

.master {
  position: fixed;
  top: 0;
  left: 200px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
}

.master div {
  position: absolute;
  top: 200px;
  right: 200px;
  width: 500px;
  height: 50px;
  background: rgb(5, 5, 75);
  display: flex;
  justify-content: space-around;
  color: white;
  font-size: 12px;
  border-radius: 8px;
}

.master div p {
  line-height: 20px;
}

.master div .ic {
  margin-top: 10px;
}

.master div p span {
  font-size: 18px;
  margin-left: 15px;
}

.dibu {
  width: 100%;
  height: 100px;
  color: #ccc;
  // margin-top:100px;
  z-index: 99999;
}

.dibu span {
  color: blue;
  font-size: 20px;
}
</style>
